<template>
    <ul id="gameLists">
        <div v-if="loaded">
            <li v-for="(item,index) in gameList" :key="index">
                <a href="javascript:void(0);" @click="dolog('GameCentList',index)" class="link">
                    <div class="gameLeft">
                        <p>
                            <img :src="item.img" alt="" :onerror="errorImg">
                        </p>
                    </div>
                    <div class="gameCenter">
                        <p class="name">{{item.name}}</p>
                        <p class="tags">{{item.describe}}</p>
                    </div>
                    <div class="gameRight">
                        <a href="javascript:void(0);">查看</a>
                    </div>
                </a>
            </li>
            <div class="scrollTrue" v-if="loadmoreGameBol && gameList != ''">
                <img src="../assets/img/loadMore.gif" alt="">
                加载中，请稍候
            </div>
            <p class="scrollFalse" v-if="gameList != '' && !loadmoreGameBol">{{txt}}</p>
        </div>
        <loading-box :message="loadingList" v-if="loadingList.show"></loading-box>
    </ul>

</template>

<script>
    import loading from './public/loading'
    export default {
        name: "GameList",
        metaInfo: {
            title: '游戏中心'
        },
        components: {
            'loading-box': loading
        },
        data (){
            return {
                platcode: 'ZHWZ',
                loaded: false,
                loadingList:{
                    msg:'',
                    show:''
                },
                gameList: [],
                errorImg: 'this.src="' + require('../assets/img/game-default.png') + '"',  //游戏图占位图
                page: 1,  //显示页数
                pageNum: 8,  //每次展示的个数
                scroll: false,   //是否可以加载更多
                loadmoreGameBol: false,  //显示加载中还是上拉加载更多 (true：加载中，false：上拉加载更多)
                txt: '上拉加载更多',  //底部加载文案
                timer: null,   //加载更多延时定时器
                route: '',  //
                sid: ''
            }
        },
        methods: {
            showMsgbox(msg){
                //弹框函数
                this.$msgbox({
                    content:msg,
                    className:'pop-custom'
                });
            },
            //获取url信息
            getParamString(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
                if(r!=null)return  unescape(r[2]); return null;
            },
            handleScroll (){
                //处理滚动事件函数
                let _this = this;
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                //触发条件：滚动条距离顶部的距离加可视窗口的高度大于等于页面内容总高度的时候
                if(scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight){
                    //未 全部加载完时

                    if (_this.scroll){

                        _this.loadmoreGameBol = true;  //显示loading加载中
                        if (!_this.timer){
                            _this.timer = setTimeout(() =>{
                                _this.loadMore();
                            },700);
                        }
                    }else{
                        _this.loadmoreGameBol = false;
                    }
                }else{
                    // _this.scroll=false;
                    // _this.loadmoreGameBol = false;
                }
            },
            loadMore () {
                //获取更多数据请求
                let _this = this;
                _this.page++;
                let data = {
                    type: 1,
                    page: _this.page,
                    pageNum: _this.pageNum,
                    zwtoken: _this.sid
                };

                _this.$http.getAxio(0,process.env.API_HOST + _this.$http.urlHead + 'yhzx_index/getGameCenter?platcode=' + _this.platcode, 'POST', _this.$qs.stringify(data)).then(res => {
                    _this.scroll = false;//禁止加载出来前多次请求
                    if (res.status == 0) {
                        if (res.data != ''){
                            console.log(res.data.length);
                            if (res.data.length < _this.pageNum) {
                                //数据不够展示一页的
                                _this.scroll = false;
                                _this.loadmoreGameBol = false;
                                _this.txt = "暂无更多游戏";

                            } else {
                                //还有数据，或者最后的数据刚好{{pageNum}}个
                                _this.scroll = true;
                                _this.loadmoreGameBol = false;
                                _this.txt = "上拉加载更多";
                            }
                            // _this.gameList.concat(res.data);
                            res.data.forEach(function (val,index){
                                _this.gameList.push(val);
                            });

                        }else{
                            _this.scroll = false;
                            _this.loadmoreGameBol = false;
                            _this.txt = "暂无更多游戏";
                        }
                        clearTimeout(_this.timer);
                        _this.timer = null;
                    } else {
                        _this.scroll = false;
                        _this.loadmoreGameBol = false;
                        _this.txt = "暂无更多游戏";
                        // _this.showMsgbox(res.msg);
                    }
                })
                    .catch(function (error) {
                        _this.scroll = false;
                        console.log(error)
                    });
            },
            getData(){
                let _this = this;
                _this.platcode = _this.getParamString('platcode');
                _this.sid = window.sessionStorage.getItem('sid');
                let data = {
                    type: 1,
                    page:_this.page,
                    pageNum: _this.pageNum,
                    zwtoken: _this.sid
                };
                // _this.gameList = [];
                _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'yhzx_index/getGameCenter?platcode=' + _this.platcode,'POST',_this.$qs.stringify(data)).then(res => {

                    _this.scroll = false;  //禁止加载出来前多次请求
                    if(res.status == 0) {
                        if (res.data != ''){

                            if (res.data.length < _this.pageNum){
                                //数据不够展示一页的
                                _this.scroll = false;
                                _this.loadmoreGameBol = false;
                                _this.txt = '暂无更多游戏';
                            }else{
                                //还有数据，或者最后的数据刚好{{pageNum}}个

                                _this.scroll = true;
                                _this.loadmoreGameBol = false;
                                _this.txt = "上拉加载更多";
                            }
                            _this.gameList = res.data;
                        }
                        _this.loaded = true;
                        _this.loadingList = {
                            msg: '',
                            show: false
                        };
                    }else if(res.status == -99){
                        _this.showMsgbox(res.msg);
                    }else{
                        _this.scroll = false;
                        _this.loadmoreGameBol = false;
                        _this.txt = "加载出错，请刷新页面";
                    }
                });
            },
            dolog(name,index){
                let _this = this;
                let keyCode = 'index'+parseInt(index+1,10);
                let data1 = '[{"action": "Yhzx/'+name+'/ClickCount/","data": {'+keyCode+': 1,}},{"action": "GameCenterClick","data": {id: '+_this.gameList[index].id+'}}]';

                let data2 = eval('(' + data1 + ')');
                let jsonData = {
                    data: data2,
                    platcode: _this.platcode,
                    zwtoken: _this.sid
                };
                let dologUrl=process.env.API_HOST+_this.$http.urlHead+'public_controller/doLogYhzxIndex?platcode='+_this.platcode;
                if(_this.route == 'fast')
                {
                	dologUrl=process.env.API_HOST+'/cYouHuiZhongXin/fastapi/dolog.php';
                	
                	//let keyCode = 'index'+parseInt(index+1,10);
	                let uid = _this.getParamString("userId");
	                if (uid){
	                    jsonData.uid=uid;
	                    /*jsonData.platform_id=?;
	                    let data = {
	                        uid: uid,
	                        platform_id: _this.platcode,
	                        action: 'ZeroBuy/TimeStatus/ClickCount/',
	                        content: '点击',
	                        details: keyCode
	                    };*/
	                 }
                }
                _this.$http.getAxio(1,dologUrl,'POST',jsonData).then(res => {
                    if (res.status == 0){
                        if (_this.gameList != ''){
                            window.location.href = _this.gameList[index].url;
                        }
                    }
                });
            }
        },
        mounted(){
            let _this = this;  //解决this指向问题
            _this.loadingList = {
                msg: '加载中...',
                show: true
            };
            _this.platcode = _this.getParamString('platcode');
            _this.route = _this.getParamString('route');
            _this.sid = window.sessionStorage.getItem('sid');
            _this.getData();
            window.addEventListener('scroll',function (){
                //监听滚动事件
                // console.log(_this.scroll);
                _this.handleScroll();
            });
        }
    }
</script>

<style lang="scss" scoped>
    #gameLists{
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        padding-top: 20px;
        li{
            width: 100%;
            padding:20px 0;
            list-style: none;
            display: table;
            /*background-color: #fff;*/
            /*border-radius: 8px;*/
            margin-bottom: 20px;
            /*box-shadow: 0 3px 8px #ddd;*/
            /*border-bottom: 2px solid #eee;*/
            .link{
                text-decoration: none;
                display: inline-block;
                width: 100%;
                div{
                    display: table-cell;
                    vertical-align: middle;
                }
                .gameLeft{
                    width: 20%;
                    padding-left: 15px;
                    box-sizing: border-box;
                    p{
                        width: 100%;
                        border-radius: 15px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            border-radius: 15px;
                        }
                    }
                }
                .gameCenter{
                    width: 56%;
                    padding-left: 4%;
                    .name{
                        color: #333;
                        font-size: 30px;
                        padding: 5px 0;
                    }
                    .tags{
                        padding: 5px;
                        color: #999;
                        font-size: 26px;
                    }
                }
                .gameRight{
                    width: 20%;
                    text-align: center;
                    a{
                        display: inline-block;
                        text-decoration: none;
                        width: 100px;
                        height: 50px;
                        line-height: 55px;
                        background: linear-gradient(to right bottom, #ff3333, #ff4102);
                        color: #fff;
                        font-size: 26px;
                        border-radius: 6px;
                    }
                }
            }
        }
        .scrollFalse{
            width: 100%;
            padding: 20px 0;
            margin: 10px 0;
            font-size: 26px;
            line-height: 30px;
            color: #666;
            text-align: center;
        }
        .scrollTrue{
            width: 100%;
            padding: 20px 0;
            margin: 10px 0;
            font-size: 26px;
            color: #666;
            line-height: 30px;
            position: relative;
            text-align: center;
            img{
                width: 28px;
                position: relative;
                top: 5px;
            }
        }
    }
</style>